<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影刀登录</title>
    <link rel="stylesheet" href="/CSS/影刀登录/Login.CSS">
</head>
<body>
    <div class="background">
        <div class="login_container">
            <img src="/CSS/影刀登录/img/loginLogo.jpg" class="logo">
            <div class="login">
                <form>
                <input type="text" placeholder="请输入用户名" class="username" required>
                <img src="/CSS/影刀登录/img/登录二维码.jpg" class="login_picture">
                <div>
                <input type="password" placeholder="请输入密码" class="password" required>
                </div>
                <div>
                    <!-- <button class="click_login">点击登录/注册</button> -->
                    <button type="button" class="click_login"  onclick="showLoginSuccess()">点击登录/注册</button>
                    <button type="reset" class="reset">恢复默认</button>
                </form>
                <p class="login_success" id="login_success">登陆成功</p>
            </div>

        </div>
    </div>
    <script>
        function showLoginSuccess() {
            // 获取登录成功提示元素
            var loginSuccess = document.getElementById('login_success');
            // 显示登录成功提示
            loginSuccess.style.display = 'block';
            // 添加淡入效果
            loginSuccess.style.opacity = '1';
            loginSuccess.style.transform = 'translateY(0)';
            
            // 设置定时器，在2秒后隐藏提示框
            setTimeout(function() {
                // 添加淡出效果
                loginSuccess.style.opacity = '0';
                loginSuccess.style.transform = 'translateY(-20px)';
                // 在淡出动画结束后完全隐藏提示框
                setTimeout(function() {
                    loginSuccess.style.display = 'none';
                }, 300); // 等待动画结束（300ms）
            }, 2000); // 2000ms 后执行
        }
    </script>
</body>
</html>